import { ref } from "vue";

const getInset = (htmlRef: any, popupRef: any, flag: boolean = true) => {
    let top: number = 0;
    let right: number = 0;
    let bottom: number = 0;
    let left: number = 0;
    let insetTop: string = "auto";
    let insetRight: string = "auto";
    let insetBottom: string = "auto";
    let insetLeft: string = "auto";
    // 三角定位
    let triangleTop: string = "auto"
    let triangleRight: string = "auto"
    let triangleBottom: string = "auto"
    let triangleLeft: string = "auto"
    let rotate: string = "rotate(0)"
    // 输入框ref
    const inputRef = ref()    
    // 获取元素在视屏中的位置
    const getOffset = () => {
        top = inputRef.value.offsetTop; // dom 的顶边到顶部的距离
        left = inputRef.value.offsetLeft; // dom 的左边到左边的距离
        const domToBottom = inputRef.value.offsetTop + inputRef.value.offsetHeight; // dom 的底边到顶部的距离
        const width = document.body.offsetWidth >= window.innerWidth ? document.body.offsetWidth : window.innerWidth
        const height = document.body.offsetHeight >= window.innerHeight ? document.body.offsetHeight : window.innerHeight
        bottom = height - domToBottom;
        right = width - inputRef.value.offsetWidth - left; // dom 的右边到右边的距离        
    };

    // 获取元素宽高
    const getWH = () => {        
        // popupRef.value.style.visibility = "hidden";
        // popupRef.value.style.display = "block";
        // const width = popupRef.value.offsetWidth;
        // const height = popupRef.value.offsetHeight;
        // popupRef.value.style.visibility = "";
        // popupRef.value.style.display = "";
        const width = popupRef.value.offsetWidth;
        const height = popupRef.value.offsetHeight;
        return {
            width,
            height
        };
    };

    // 获取弹出框的位置
    const getPosition = (popuWidth: number, popuHeight: number) => {
        // 三角偏移距离
        const W: number = 5 * Math.sin(45)
        let top1: number | string = "auto";
        let right1: number | string = "auto";
        let bottom1: number | string = "auto";
        let left1: number | string = "auto";
        insetTop = top1
        insetRight = right1
        insetBottom = bottom1
        insetLeft = left1
        triangleTop = "auto"
        triangleRight = "auto"
        triangleBottom = "auto"
        triangleLeft = "auto"
        // 输入框元素宽高
        const htmlWidth: number = inputRef.value.offsetWidth;
        const htmlHeight: number = inputRef.value.offsetHeight;

        // 获取下拉框左右距离
        const getLeftRight = () => {
            if (htmlWidth >= popuWidth) {
                left1 = left + (htmlWidth - popuWidth) / 2
                insetLeft = left1 + "px"
                const triangleLeft1 = popuWidth / 2 - W
                triangleLeft = triangleLeft1 + "px"                
            } else {
                if (left <= right) {
                    left1 = 0
                    if (left >= (popuWidth - htmlWidth) / 2) {
                        left1 = left - (popuWidth - htmlWidth) / 2
                    }
                    insetLeft = left1 + "px"
                    const triangleLeft1 = left + (htmlWidth / 2) - left1 - W
                    triangleLeft = triangleLeft1 + "px"
                } else {
                    right1 = 0
                    if (right >= (popuWidth - htmlWidth) / 2) {
                        right1 = right - (popuWidth - htmlWidth) / 2
                    }
                    const triangleRight1 = right + (htmlWidth / 2) - right1 - W
                    triangleRight = triangleRight1 + "px"
                    insetRight = right1 + "px"
                }
            }
        };

        // 获取下拉框上下距离
        const getTopBottom = () => {
            if (top <= bottom) {
                if (top >= (popuHeight - htmlHeight) / 2) {
                    top1 = top - (popuHeight - htmlHeight) / 2
                    insetTop = top1 + "px"
                    const triangleTop1 = top + (htmlHeight / 2) - top1 - W
                    triangleTop = triangleTop1 + "px"
                }
            } else {
                if (bottom >= (popuHeight - htmlHeight) / 2) {
                    bottom1 = bottom - (popuHeight - htmlHeight) / 2
                    insetBottom = bottom1 + "px"
                    const triangleBottom1 = bottom + (htmlHeight / 2) - bottom1 - W
                    triangleBottom = triangleBottom1 + "px"
                }
            }
        }

        // 输入框底部距离大于下拉框高度
        const WPX: string = "calc(-5px / sin(45))"
        if (bottom > popuHeight + 10) {
            top1 = top + htmlHeight + 10;
            insetTop = top1 + "px";
            getLeftRight();
            rotate = "rotate(-45deg)"
            triangleTop = WPX

            return;
        }
        // 输入框顶部距离大于下拉框高度
        if (top > popuHeight + 10) {
            bottom1 = bottom + htmlHeight + 10;
            insetBottom = bottom1 + "px";
            getLeftRight();
            rotate = "rotate(135deg)"
            triangleBottom = WPX
            return;
        }
        // 输入框左边距离大于下拉框高度
        if (left > popuWidth + 10) {
            right1 = right + htmlWidth + 10;
            insetRight = right1 + "px";
            getTopBottom()
            rotate = "rotate(45deg)"
            triangleRight = WPX
            return;
        }
        // 输入框右边距离大于下拉框高度
        if (right > popuWidth + 10) {
            left1 = left + htmlWidth + 10;
            insetLeft = left1 + "px";
            getTopBottom()
            rotate = "rotate(-135deg)"
            triangleLeft = WPX
            return;
        }
        top1 = top + htmlHeight + 10;
        insetTop = top1 + "px";
        getLeftRight()
        rotate = "rotate(-45deg)"
        triangleTop = WPX
    };

    if (flag) {
        inputRef.value = htmlRef.value.$el
    } else {
        inputRef.value = htmlRef.value
    }
    const { width, height } = getWH();
    getOffset();
    getPosition(width, height);

    return {
        top,
        right,
        bottom,
        left,
        insetTop,
        insetRight,
        insetBottom,
        insetLeft,
        triangleTop,
        triangleRight,
        triangleBottom,
        triangleLeft,
        rotate
    };
};

export { getInset };